<template>
    <Transition name="op">
        <div v-show="flag" class="nothing_big">
            <img src="http://43.138.15.137:8085/static/common/nothing.png">
            <span>什么都没有</span>
        </div>
    </Transition>
</template>
<script>
export default ({
    props: {
        flag: {
            type: Boolean,
        }
    },
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.nothing_big {
    width: 100%;
    padding-top: r(17);
    display: flex;
    align-items: center;
    flex-direction: column;

    img {
        width: r(102);
        height: r(102);
    }
    span{
        font-size: r(12);
        color: #666;
        font-weight: bold;
        margin-top: r(5);
    }
}

.op-enter-active {
    animation: shadow 0.5s linear;
}

.op-leave-active {
    animation: shadow 0.5s linear reverse;
}

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>